<template>
  <div class="all">
    <div class="over">
      <div class="left">
           <img class="left_logo" src="../../assets/adver_video_detail/tiktok_logo.png"/>
            <div class="left_title">
                <h4>{{AdverProductMessage.video.vname}}</h4>
            </div>
            <div class="left_message">
                <img class="left_logo1" src="../../assets/adver_video_detail/arcoDesign-caret-right.png"/>
                <a class="left_message1">10.0万</a>
                <img  class="left_logo1" src="../../assets/adver_video_detail/ze-like-o.png"/>
                <a class="left_message1">10.0万</a>
                <img class="left_logo1" src="../../assets/adver_video_detail/ze-star-o.png"/>
                <a class="left_message1">10.0万</a>
                <img class="left_logo1" src="../../assets/adver_video_detail/iconPark-share-one.png"/>
                <a class="left_message1">10.0万</a>
                <img class="left_logo1" src="../../assets/adver_video_detail/if-fire-burn (2).png"/>
                <a class="left_message2">179</a>
            </div>
            <div class="adver1"><a>广告位1</a></div>
            <div class="adver_message">
                <div class="adver_message_item">时间：{{AdverProductMessage.apbegintime}}-{{AdverProductMessage.apfinaltime}}</div>
                <div class="adver_message_item">场景：{{AdverProductMessage.asession}}</div>
                <div class="adver_message_item">状态：已合作 3 个广告商</div>
                <div class="adver_message_item">大小：{{AdverProductMessage.apsize}} 10%</div>
            </div>
            <!-- <div class="adver_detail">
                 <div class="item_message_1">
                    <div class="item_message_1_1">
                        <img class="item_message_1_logo" src="../../assets/adver_video_detail/iconPark-ad.png"/>
                        <a class="font_group">义乌小商品</a>
                    </div>
                    <div class="item_message_1_1">
                        <img class="item_message_1_logo" src="../../assets/adver_video_detail/iconPark-ad.png"/>
                        <a class="font_group">苹果旗舰店</a>
                    </div>
                </div>
                    <div class="item_message_2">
                        <div class="item_message_2_1">
                            <img class="item_message_1_logo" src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                            <a class="font_group">黑色包包</a>
                        </div>
                        <div class="item_message_2_1">
                            <img class="item_message_1_logo" src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                            <a class="font_group">苹果电脑</a>
                        </div>
                    </div>
                     <div class="item_message_3">
                            <div class="item_message_3_1">
                                <img class="item_message_1_logo" src="../../assets/producer_video_detail/iconPark-finance.png"/>
                                <a class="font_group">2.4W</a>
                            </div>
                            <div class="item_message_3_1">
                                <img class="item_message_1_logo" src="../../assets/producer_video_detail/iconPark-finance.png"/>
                                <a class="font_group">4W</a>
                            </div>
                        </div>
            </div> -->
            <div>
                <el-button  @click="dialogFormVisible=true" class="right_button1" type="danger">已成交订单</el-button>
                <el-button @click="push(AdverProductMessage.vid)" class="right_button2" type="warning">查看详情</el-button>
            </div>
      </div>
      <div class="top">
            <el-radio-group class="el-radio-group-" fill="#4ABDAC" v-model="radio1">
                <el-button   @click="switchItem('交易中心')" :class="button_type1" label="交易中心">待处理交易</el-button>
                <el-button  @click="switchItem('成交记录')"  :class="button_type2" label="成交记录">成交记录</el-button>
            </el-radio-group>
            <el-input class="button_group_search"   placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input3"></el-input>
      </div>
      <div>
        <div class="right1" id="s1"  v-show="atClick1==1" style="" v-for="(item,index) in trade1" :key="index">
                <el-card class="right1_card_1">
                    <div class="right_left">
                        <el-card @click="push2()" class="right_left_card">
                            <img @click="push2()" :src="item.product.paddress" class="imgItem" />
                            <a @click="push2()" class="right_left_card_message1">{{item.product.pname}}</a>
                            <a @click="push2()" class="right_left_card_message2">{{item.product.preleasetime}}</a>
                        </el-card>
                        <div class="price">
                            <a  class="price_title">投送价格:</a>
                            <a  class="price_message">{{item.coprice}}元</a>
                        </div>
                    </div>
                    <div class="right_right">
                        <div class="right_right1">品牌方：{{item.advertiser.aname}}</div>
                        <div class="right_right2">广告类型：播放量</div>
                        <div class="right_right3">合作内容：3000播放</div>
                        <div class="right_right4">合作意向：1、{{item.cointention}}</div>
                        <div class="context">2、本品牌商同意和视频制作者共同商讨相关细则</div>
                        <div class="context">3、本品牌商在产品保护上有着一定的见解与共识</div>
                        <div class="context">4、在交易过程中，秉持公平正义的原则</div>
                        <div class="context">5、希望将价格下调</div>
                        <div class="right_right5">
                            <a>电话号码:{{item.advertiser.aphone}}</a>
                            <a class="right_right5_1">电子邮箱：{{item.advertiser.aemail}}</a>
                        </div>
                        <!-- <div class="right_right6">提交时间：{{item.costartdate}}</div> -->
                        <div>
                            <el-button v-if="item.costate=='待确认'" class="right_button_1" type="warning" @click="AgreeTrade(item.coid)">接受</el-button>
                            <el-button  v-if="item.costate=='待确认'" class="right_button_2" type="info" @click="disAgreeTrade(item.coid)">拒绝</el-button>
                        </div>
                    </div>
                </el-card>
        </div> 
      </div>
      <div class="right2" id="s2" v-show="atClick2==1" style="display:none" v-for="(item1, index) in trade2" :key="index">
            <el-card class="right1_card_2">
                    <div class="right_left">
                        <el-card @click="push2()" class="right_left_card">
                            <img  @click="push2()" :src="item1.product.paddress" class="imgItem"/>
                            <!-- <img v-if="index==1" @click="push2()" src="../../assets/product/diannao.jpg" class="imgItem"/>
                            <img v-if="index==2" @click="push2()" src="../../assets/product/diannao.jpg" class="imgItem"/> -->
                            <a  @click="push2()" class="right_left_card_message1">{{item1.product.pname}}</a>
                            <a @click="push2()" class="right_left_card_message2">{{item1.product.preleasetime}}</a>
                        </el-card>
                        <div class="price">
                            <a  class="price_title">投送价格:</a>
                            <a  class="price_message">{{item1.coprice}}元</a>
                        </div>
                    </div>
                    <div class="right_right">
                        <div class="right_right1">品牌方：{{item1.advertiser.aname}}</div>
                        <div class="right_right2">广告类型：播放量</div>
                        <div class="right_right3">合作内容：3000播放</div>
                        <div class="right_right4">合作意向：1、{{item1.cointention}}</div>
                        <div class="context">2、本品牌商同意和视频制作者共同商讨相关细则</div>
                        <div class="context">3、本品牌商在产品保护上有着一定的见解与共识</div>
                        <div class="context">4、在交易过程中，秉持公平正义的原则</div>
                        <div class="context">5、希望将价格下调</div>
                        <div class="right_right5">
                            <a>电话号码:{{item1.advertiser.aphone}}</a>
                            <a class="right_right5_1">电子邮箱：{{item1.advertiser.aemail}}</a>
                        </div>
                        <div class="right_right6">
                            <!-- <a>提交时间：{{item1.costartdate}}</a>
                            <a class="right_right66">成交时间：{{item1.costartdate}}</a> -->
                        </div>
                        <div>
                            <el-button  v-if="item1.costate=='进行中'"  class="right_button_1_r" type="warning" plain>进行中</el-button>
                            <el-button  v-if="item1.costate=='已终止'" class="right_button_1_r" type="success" plain>已终止</el-button>
                            <el-button  v-if="item1.costate=='已拒绝'" class="right_button_3" type="info">已拒绝</el-button>
                        </div>
                    </div>
            </el-card>

            <!-- <el-card class="right1_card_2">
                    <div class="right_left">
                        <el-card class="right_left_card">
                            <img src="../../assets/producer_trade/iphone13.png" />
                            <a class="right_left_card_message1">iPhone 13 Pro</a>
                            <a class="right_left_card_message2">2021/12/30</a>
                        </el-card>
                        <div class="price">
                            <a  class="price_title">投送价格:</a>
                            <a  class="price_message">30W</a>
                        </div>
                    </div>
                    <div class="right_right">
                        <div class="right_right1">品牌方：苹果Apple</div>
                        <div class="right_right2">广告类型：播放量</div>
                        <div class="right_right3">合作内容：3000播放</div>
                    <div class="right_right4">合作意向：1、本品牌商本着互利共赢的原则</div>
                        <div class="context">2、本品牌商同意和视频制作者共同商讨相关细则</div>
                        <div class="context">3、本品牌商在动物保护上有着一定的见解与共识</div>
                        <div class="context">4、在交易过程中，秉持公平正义的原则</div>
                        <div class="context">5、希望将价格下调</div>
                        <div class="right_right5">
                            <a>电话号码:13231232123</a>
                            <a class="right_right5_1">电子邮箱123123456@qq.com</a>
                        </div>
                        <div class="right_right6">
                            <a>提交时间：2021/1/13 13:07:09</a>
                            <a class="right_right66">成交时间：2021/1/14 13:07:09</a>
                        </div>
                        <div>
                            <el-button  class="right_button_1_r" type="success" plain>已终止</el-button>
                        
                        </div>
                    </div>
                </el-card> -->

      </div>
    </div>
    
    <el-dialog width="700px" class="trade_edit" :visible.sync="dialogFormVisible">
            <el-form class="trade_edit_form">
                 <el-table
                    :data="tableData"
                    style="width: 100%"
                    >
                    <el-table-column
                    prop="date"
                    label="品牌"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="雅诗兰黛"
                    width="170">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="雅迪电动车"
                    width="170">
                    </el-table-column>
                    <el-table-column
                    prop="moutain"
                    label="百岁山"
                    width="170">
                    </el-table-column>
                </el-table>

            </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name:'producer_trade',
    data() {
        return {
            radio1:'',
            input3:'',
            dialogFormVisible:false,
            button_type1:'button_group_button1_focus',
            button_type2:'button_group_button2',
            imgItem:["../../assets/product/map.jpg",
            "../../assets/product/bag.jpg",
            "../../assets/product/diannao.jpg"],
            tableData: [
                {
                    date: '产品',
                    name: '粉底液',
                    address: '小小电动车',
                    moutain:'新年促销活动',
                },
                 {
                    date: '广告类型',
                    name: '播放量',
                    address: '播放量',
                    moutain:'播放量',
                },
                 {
                    date: '合作内容',
                    name: '300次播放',
                    address: '300次播放',
                    moutain:'300次播放',
                },
                 {
                    date: '合作意向',
                    name: 'xxxxxxxxxxx',
                    address: 'xxxxxxxxxxx',
                    moutain:'xxxxxxxxxxx',
                },
                   {
                    date: '成交价格',
                    name: '3W',
                    address: '3W',
                    moutain:'3W',
                },
                {
                    date: '合作时间',
                    name: '2021/1/12 13:08:09',
                    address: '2021/1/12 13:08:09',
                    moutain:'2021/1/12 13:08:09',
                },
                 {
                    date: '电话号码',
                    name: '13138203948',
                    address: '13138203948',
                    moutain:'13138203948',
                },
                {
                    date: '电子邮箱',
                    name: '2726187738@qq.com',
                    address: '2726187738@qq.com',
                    moutain:'2726187738@qq.com',
                },       
                ],
            AdverProductMessage:{},
            trade1:[],
            trade2:[],
            atClick1:1,
            atClick2:0,
            
        }
    },
     methods: {
            switchItem:function(tag){
                if(tag=="交易中心"){
                    this.button_type1='button_group_button1_focus'
                    this.button_type2='button_group_button2'
                    this.atClick1=1
                    this.atClick2=0
                  
                }
                else{
                     this.button_type2='button_group_button2_focus'
                     this.button_type1='button_group_button1'
                    this.atClick1=0
                    this.atClick2=1
                }
            },
            push:function(vid){
                sessionStorage.setItem('vid',JSON.stringify(vid))
                this.$router.push({path:'/producer_video_detail'})
            },
            push2(){
                this.$router.push({path:'/adver_detail'})
            },
            //左边的广告位信息开始
            init(){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(sessionStorage.getItem("apid"));
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/advertiserSpace/findallbyapid',
                    params:{"apid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.AdverProductMessage=arr;
                    console.log(444)
                    console.log(this.AdverProductMessage)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
            //左边你的广告位信息结束

            //右边第一块的交易信息开始
            Atrade1(){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(sessionStorage.getItem("apid"));
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/cooperation1/findallbyapidgoing',
                    params:{"apid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.trade1=arr;
                    console.log(555)
                    console.log(this.trade1)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
            //右边第一块的交易信息结束
            
            //右边第2块的交易信息开始
            Atrade2(){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(sessionStorage.getItem("apid"));
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/cooperation1/findallbyapidover',
                    params:{"apid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.trade2=arr;
                    console.log(888)
                    console.log(this.trade2)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
            //右边第2块的交易信息结束

            //同意合作
            AgreeTrade(coid){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(coid);
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/cooperation/agree',
                    params:{"coid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.Atrade1();
                    this.Atrade2();
                    this.$message({
                        title: '成功',
                        message: '合作成功',
                        type: 'success',
                        offset:75
                    });
                    // this.trade2=arr;
                    // console.log(888)
                    // console.log(this.trade2)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
            //同意合作结束
            //不同意合作结束
            disAgreeTrade(coid){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(coid);
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/cooperation/refuse',
                    params:{"coid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.Atrade1();
                    this.Atrade2();
                    this.$message({
                        title: '成功',
                        message: '您已拒绝这次合作',
                        offset:75
                    });
                    // this.trade2=arr;
                    // console.log(888)
                    // console.log(this.trade2)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
            //不同意合作结束
    },
    mounted(){
        this.init();
        this.Atrade1();
        this.Atrade2();
    }
}
</script>

<style scoped>
@import "../../style/producer_trade.css";
</style>